<template>
	<view class="page">
		<headerinfo></headerinfo>
		<!-- <u-navbar titl	e="消息中心" :placeholder="true"  :autoBack="true"></u-navbar> -->
		<view class="boxpage">
			<view class="tabs">
				<view class="list" @click="tabIndex = 3">
					<image src="https://cdn-oss.familylove.online/user/kmh/image/qinyou.jpg" mode="widthFix"></image>
					<span>亲友</span>
					<u-badge v-if="unreadCountMap.publish" :value="unreadCountMap.publish"></u-badge>
				</view>
        <view class="list" @click="tabIndex = 2">
          <image src="https://cdn-oss.familylove.online/user/kmh/image/soucang.jpg" mode="widthFix"></image>
          <span>收藏</span>
          <u-badge v-if="unreadCountMap.favorite" :value="unreadCountMap.favorite"></u-badge>
        </view>
        <view class="list" @click="tabIndex = 1">
          <image src="https://cdn-oss.familylove.online/user/kmh/image/like.jpg" mode="widthFix"></image>
          <span>喜欢</span>
          <u-badge v-if="unreadCountMap.like" :value="unreadCountMap.like"></u-badge>
        </view>
        <view class="list" @click="tabIndex = 0">
          <image src="https://cdn-oss.familylove.online/user/kmh/image/discuss.jpg" mode="widthFix"></image>
          <span>评论</span>
          <u-badge v-if="unreadCountMap.comment" :value="unreadCountMap.comment"></u-badge>
        </view>
			</view>
			
			<view class="listboxs" v-show="tabIndex == 0">
				<view class="li" @click="toInfo(item)" v-for="(item,index) in messages.comment" :key="index">
					<image class="touxiang" :src="item.avatar" mode="aspectFill"></image>
					<view class="title">
						{{item.showName}}
					</view>
					<view class="title">
						{{item.articleTitle}}
					</view>
					<view class="desc">
						{{item.content}}
					</view>
					<view class="desc2">
						{{item.dataUpdateTime}}
					</view>
					<view class="dian" v-if="!item.isRead"></view>
				</view>
				
				<nodata v-if="!messages.comment"></nodata>
			</view>
			
			
			<view class="listboxs" v-show="tabIndex == 1">
				<view class="li" @click="toInfo(item)" v-for="(item,index) in messages.like" :key="index">
					<image class="touxiang" :src="item.avatar" mode="aspectFill"></image>
					<view class="title">
						{{item.showName}}
					</view>
					<view class="title">
						{{item.articleTitle}}
					</view>
					<view class="desc">
						{{item.content}}
					</view>
					<view class="desc2">
						{{item.dataUpdateTime}}
					</view>
					<view class="dian" v-if="!item.isRead"></view>
				</view>
				<nodata v-if="!messages.like"></nodata>
			</view>
			
			<view class="listboxs" v-show="tabIndex == 2">
				<view class="li" @click="toInfo(item)" v-for="(item,index) in messages.favorite" :key="index">
					<image class="touxiang" :src="item.avatar" mode="aspectFill"></image>
					<view class="title">
						{{item.showName}}
					</view>
					<view class="title">
						{{item.articleTitle}}
					</view>
					<view class="desc">
						{{item.content}}
					</view>
					<view class="desc2">
						{{item.dataUpdateTime}}
					</view>
					<view class="dian" v-if="!item.isRead"></view>
				</view>
				<nodata v-if="!messages.favorite"></nodata>
			</view>
			
			<view class="listboxs" v-show="tabIndex == 3">
				<view class="li" @click="toInfo(item)" v-for="(item,index) in messages.publish" :key="index">
					<image class="touxiang" :src="item.avatar" mode="aspectFill"></image>
					<view class="title">
						{{item.showName}}
					</view>
					<view class="title">
						{{item.articleTitle}}
					</view>
					<view class="desc">
						{{item.content}}
					</view>
					<view class="desc2">
						{{item.dataUpdateTime}}
					</view>
					<view class="dian" v-if="!item.isRead"></view>
				</view>
				<nodata v-if="!messages.publish"></nodata>
			</view>
		</view>
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			tabIndex:0,
			messages:{},
			unreadCountMap:{}
		};
	},
	onShow(e) {
		this.getData()
	},
	methods: {
		getData(){
			let query = {
				unRead:false
			}
			this.$api.getSystemMessage(query).then(res=>{
				console.log('系统消息')
				console.log(res)
				this.messages = res.messages
				this.unreadCountMap = res.unreadCountMap
				
			})
		},
		toInfo(item){
			if(!item.isRead){
				let data = {
					messageId:item.docId
				}
				this.$api.systemMessageRead(data).then(res=>{
					uni.navigateTo({
						url:`/pages/news/details?id=${item.articleId}`
					})
				})
			}else{
				uni.navigateTo({
					url:`/pages/news/details?id=${item.articleId}`
				})
			}
		}
		
	}
};
</script>

<style lang="scss">
	.page{
		background-color: #fff!important;
	}
	
	.tabs{
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top: 1px solid #f1f1f1;
		.list{
			width: 33.3%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			padding: 30rpx 0;
			position: relative;
			cursor: pointer;
			image{
				width: 80rpx;
				height: auto;
				margin-bottom: 10rpx;
			}
		}
	}
	
	.listboxs{
		.touxiang{
			width: 170rpx;
			height: 170rpx;
			border-radius: 10rpx;
			position: absolute;
			left: 30rpx;
			top: 50%;
			transform: translateY(-50%);
		}
		.li{
			display: flex;
			flex-direction: column;
			position: relative;
			justify-content: center;
			box-sizing: border-box;
			padding:15rpx 30rpx;
			border-top: 1px solid #dfdfdf;
			padding-left: 240rpx;
			.title{
				font-size: 34rpx;
				margin-bottom: 18rpx;
				font-weight: bold;
			}
			.desc{
				color: #8c8c8c;
			}
			.desc2{
				margin-top: 10rpx;
				color: #8c8c8c;
			}
			
			.dian{
				width: 6px;
				height: 6px;
				background-color: #ff5858;
				position: absolute;
				right: 10px;
				top: 10px;
				border-radius: 50%;
			}
		}
	}
	
	::v-deep .u-badge{
		position: absolute;
		right: 15px;
		top: 0;
	}
	
	.boxpage{
		width: 70%;
		margin: 30px auto;
		box-shadow: 0 0 3px #ccc;
		border-radius: 20rpx;
	}
</style>
